Remote debug Chrome browser on Raspberry Pi

I very often use Raspberry Pis for any kind of installations and tinkering. When there should something be displayed or the installation has any kind of display interface I always use web technologies for that. So building a website, which I run in Google Chrome browser in kiosk mode. With Google Remote Debugging, built in Chrome Browser, it’s very easy to have the website running on the raspberry pi but developing and debugging on a remote computer.

Therefore your computer and your raspberry pi just need to be on the same network.

So, first of all, you need to access your raspberry pi via SSH connection. In the best case you add your computers public SSH key to the raspberry pis list of authorized keys, so you do not have to enter the user’s password when you log in:

Just replace the username and the IP of your raspberry pi you are working on:
cat ~/.ssh/id_rsa.pub | ssh {user}@{IP adress} 'cat >> .ssh/authorized_keys'

You have to run the Chrome browser on the raspberry pi. If you don’t have, install it:
sudo apt-get install chromium-browser

You could put it on the autostart of the raspberry pi. Therefor use your favorite editor (nano here) to modify the following file:
sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart

Now add this line to the file:
@chromium-browser --remote-debugging-port=9222 --incognito http://localhost

It will open the chrome browser on startup opening the URL: „http://localhost“. Here you could choose your own URL of course. It will also allow remote debugging on port 9222. So this port should not be closed within your configuration.

The last step to do is tunnel this port so you could access it from the remote computer. Therefore type in the following command:
ssh -L 0.0.0.0:9223:localhost:9222 localhost -N

Now open the hostname or IP of your raspberry pi on port 9223 in your local Chrome browser instance:
http://{IP adress}:9223

You will get a selection of debuggable sites. The first entry should be your remote raspberry pi website. Now you could use the Chrome Development Tools to remotely debug your website project.

Have fun!

cheers.
Sebastian